<template>
 	<view style="background-image: linear-gradient(to bottom, rgba(231, 240, 248, 1) 0%, #FFFFFF 100%);">
		<!-- <z-paging ref="paging" v-model="dataList" @query="queryList"> -->
			<view class="msg-nav">
				<view class="msg-1" @click="toLike">
					<view class="tip">
						<image src="../../static/icon/icon-like.png" mode=""></image>
						<view class="point" v-if="totality.likeNum !== 0">{{totality.likeNum}}</view>
					</view>
					<text>新的点赞</text>
				</view>
				<view class="msg-1" @click="toNewAddFans">
					<view class="tip">
						<image src="../../static/icon/icon-follow.png" mode=""></image>
						<view class="point" v-if="totality.followers !== 0">{{totality.followers}}</view>
					</view>
					<text>新的关注</text>
				</view>
				<view class="msg-1" @click="toComment">
					<view class="tip">
						<image src="../../static/icon/icon-comment.png" mode=""></image>
						<view class="point" v-if="totality.commentNum !== 0">{{totality.commentNum}}</view>
					</view>
					<text>新的评论</text>
				</view>
			</view>
		
			<view class="msg-list">
				<!-- <view v-for="(item,i) in lists" :key="i" class="list">
					<view class="row">
						<image :src="item.icon" mode=""></image>
						<view class="left">
							<view class="title">
								<view class="title-1">
									<text>{{item.subject}}</text>
									<image src="../../static/jingyin.png" mode="" v-if="item.show"></image>
								</view>
								<text class="title-2">{{item.smallTitle}}</text>
							</view>
							<view class="right"> 
								<text >{{item.time}}</text>
								<view :class="{'hidden':item.show,'show':!item.show}">{{item.vote}}</view>
							</view>
						</view>
					</view>
				</view> -->
				
				<view class="list">
					<view class="row" @click="toPage">
						<view class="head">
							<image src="../../static/img/logo-white.png" mode=""></image>
						</view>
						<view class="left">
							<view class="title">
								<view class="title-1">
									<text>系统消息</text>
									<image src="../../static/jingyin.png" mode=""></image>
								</view>
								<text class="title-2">{{totality.sysNotification.message}}</text>
							</view>
							<view class="right"> 
								<text >{{totality.sysNotification.createdAt | timeFrom(false)}}</text>
								<view class="hidden" v-if="totality.sysNotification.notReadNum">{{totality.sysNotification.notReadNum}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		<!-- </z-paging> -->
 	</view>
 </template>
 
 <script>
	 import {unreadMessageAllApi,systemMessageListApi} from '../../api/index.js'
 	export default {
 		data() {
 			return {
				dataList:[],
 				lists: [],
				totality:{
					commentNum:0,
					followers:0,
					likeNum:0,
					sysNotification:{
						createdAt:0,
						message:'',
						notReadNum:0
					}
				}
 			}
 		},
		onLoad() {
			// this.getMessage()
		},
		onShow() {
			this.getMessage()
		},
		onUnload() {
			uni.$emit('detailBlack')
		},
 		methods: {
			toPage () {
				uni.navigateTo({
					url: './systemMsg'
				})
			},
			//跳转点赞
			toLike(){
				uni.navigateTo({
					url: '../community/like'
				})
			},
			
			//跳转到新增粉丝
			toNewAddFans(){
				uni.navigateTo({
					url: '../community/newAddFans'
				})
			},
			
			//跳转评论
			toComment(){
				uni.navigateTo({
					url: '../community/comment'
				})
			},
			
			//获取消息
			async getMessage(){
				try{
					const res = await unreadMessageAllApi()
					this.totality = res.data
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title:e.message || e.data,
						icon:'none'
					})
				}
			},
			
			//下拉刷新,上拉加载
			// async queryList(pageNo, pageSize) {
			// 	try{
			// 		//获取未读信息
			// 		const res = await unreadMessageAllApi()
			// 		this.totality = res.data
			// 		//获取系统信息
			// 		const systemMessageRes = await systemMessageListApi()
					
			// 		this.$refs.paging.complete(systemMessageRes.data);
			// 	}catch(e){
			// 		//TODO handle the exception
			// 		// 如果请求失败
			// 		this.$refs.paging.complete(false) //展示错误页面
			// 	}
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
				// this.$request.queryList({
				// 	pageNo,
				// 	pageSize
				// }).then(res => {
				// 	//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
				// 	this.$refs.paging.complete(res.data.list);
				// }).catch(res => {
				// 	//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				// 	//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 	//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				// 	this.$refs.paging.complete(false);
				// })
			// }
			
			
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
	 
 	.msg-nav {
 		display: flex;
		padding: 20rpx 70rpx 0 70rpx;
 		justify-content: space-between;
 		.msg-1 {
 			width: 114upx;
 			height: 156upx;
 			.tip{
 				position: relative;
				// margin-bottom: 22upx;
 				image {
 					width: 107upx;
 					height: 107upx;
 					border-radius: 50%;
 				}
 				.point{
 					background-color: red;
 					color:#FFFFFF;
 					width: 28upx;
 					height: 28upx;
 					position: absolute;
 					top:0;
 					right: 0;
 					border-radius: 50%;
 					font-size: 18upx;
 					padding: 5upx;
 					display: flex;
 					align-items: center;
 					justify-content: center;
 				}
 			}
 			text {
                font-size: 28upx;
				margin-top:22upx;
 			}
 		}
 	}
 
 	.msg-list {
 		margin-top: 60upx ;
 		padding: 0 40upx;
 		.list {
 		margin-bottom:50upx;
 		}
 		.row {
 			height: 80upx;
 			display: flex;
			.head {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background-color: #0098DF;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 9rpx;
				image {
					width: 75rpx;
					height: 28rpx;
				}
			}
 			
 			.left {
 				padding-left: 30upx;
 				display:flex;
 				justify-content: space-between;
 				width: calc(100% - 110upx);
 				.title{
 					font-size: 32upx;
 					font-family: PingFang SC;
 					font-weight: 500;
 					color: #000000;
 					width: calc(100% - 140upx);
					line-height: 40upx;
 					.title-1 {
 						display: flex;
 						text {
 							display: inline-block;
 							padding-right: 20upx;
 							white-space: nowrap;
 							overflow: hidden;
 							text-overflow: ellipsis;
							font-size: 32upx;
							font-weight: 500;
 						}
 						image {
 							width: 36upx;
 							height: 36upx;
 						}
 					}
 					.title-2 {
 						width: 100%;
						height: 80rpx;
 						font-size: 24upx;
 						font-family: PingFang SC;
 						font-weight: 400;
 						color: #8F9091;
 						white-space: nowrap;
 						overflow: hidden;
 						text-overflow: ellipsis;
 						display: inline-block;
 					}
 				}
 				.right{
 					color:#8F9091;
 					text-align: center;
 					line-height: 40upx;
 					display: flex;
 					flex-direction: column;
 					align-items: center;
 					text{
 						font-size:24upx;
 					}
 					.hidden{
 						height: 36upx;
 						min-width: 36upx;
 						background-color: #C9C9C9;;
 						border-radius: 50%;
 						display: flex;
 						justify-content: center;
 						align-items: center;
 						padding: 5upx;
 						font-family: DIN;
 						font-weight: bold;
 						color: #FEFEFE;
						font-size: 18upx;
 					}
 					.show{
 						height: 36upx;
 						min-width: 36upx;
 						background-color: red;
 						border-radius: 36upx;
 						display: flex;
 						justify-content: center;
 						align-items: center;
 						padding: 5upx;
 						color: #fff;
 						font-size:16upx;
						font-family: DIN;
						font-weight: bold;
 					}
 				}
 			}
 			
 		}
 	}
 </style>